<template>
  <div class="index_content">
    <hqy-header></hqy-header>
    <!-- banner -->
    <banner-swiper></banner-swiper>
    <!-- 数字滚动 -->
    <div class="num_move">
      <p>
        <span class="color_block">
          <i></i>
          <i></i>
          <i></i>
        </span>
        <span class="title">20年品牌沉淀</span>
        <span class="title_tips">陪伴孩子终身学习</span>
      </p>
      <p>
      <ul>
        <li>
          <span>{{hqyYear}}年</span>
          <span>学科教研经验</span>
        </li>
        <li>
          <span>{{hqyBank}}{{hqyBankTwo}}{{hqyBankThree}}+</span>
          <span>智能题库积累</span>
        </li>
        <li>
          <span>{{hqyStudentsOne}}{{hqyStudentsTwo}}{{hqyStudentsThree}}+</span>
          <span>累计服务学员</span>
        </li>
        <li>
          <span>{{hqyParents}}.{{parPoint}}%</span>
          <span>家长满意度</span>
        </li>
      </ul>
      </p>
    </div>
    <!-- 个性化课程 -->
    <div
      class="courses"
      data-animation="on"
    >
      <div :class="['course_title', courseOne?'show':'']">
        <p>COURSE</p>
        <p>PERSONALIZED</p>
        <p></p>
        <p>满足学生多样需求</p>
        <span>全品类班型</span>
        <span>个性化课程</span>
      </div>
      <div :class="['cimg_one',courseOne?'show':'']">
        <div :class="['course_one', 'ih-item', 'circle', 'effect13', 'from_left_and_right']">
          <a target="_blank" href="http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_157.shtml">
            <div class="info">
              <div class="info-back">
                <h3>KET冲刺班</h3>
                <p>点击查看</p>
              </div>
            </div>
          </a>
        </div>
        <div :class="['course_two', 'ih-item', 'circle', 'effect13', 'from_left_and_right']">
          <a target="_blank" href="http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_155.shtml">
            <div class="info">
              <div class="info-back">
                <h3>PET冲刺班 </h3>
                <p>点击查看</p>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div :class="['cimg_two',courseOne?'show':'']">
        <div :class="['course_three', 'ih-item', 'circle', 'effect13', 'from_left_and_right']">
          <a target="_blank" href="http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_161.shtml">
            <div class="info">
              <div class="info-back">
                <h3>八少八素模考班</h3>
                <p>点击查看</p>
              </div>
            </div>
          </a>
        </div>
        <div :class="['course_four', 'ih-item', 'circle', 'effect13', 'from_left_and_right']">
          <a target="_blank" href="http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_165.shtml">
            <div class="info">
              <div class="info-back">
                <h3>综合素质押题班</h3>
                <p>点击查看</p>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div :class="['cimg_three',courseOne?'show':'']">
        <div :class="['course_five', 'ih-item', 'circle', 'effect13', 'from_left_and_right']">
          <a target="_blank" href="http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_163.shtml">
            <div class="info">
              <div class="info-back">
                <h3>小升初冲刺班</h3>
                <p>点击查看</p>
              </div>
            </div>
          </a>
        </div>
        <div :class="['course_six', 'ih-item', 'circle', 'effect13', 'from_left_and_right']">
          <a target="_blank" href="http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_167.shtml">
            <div class="info">
              <div class="info-back">
                <h3>中考五一串讲提分营</h3>
                <p>点击查看</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 课程导航 -->
    <div
      id="targetBox"
      class="courses_tabs"
    >
      <div :class="['tabs_main', tabShow?'tabs_show':'']">
        <p>
          <span class="cb_inset">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="title">课程导航</span>
          <span class="title_tips">280万家庭信赖之选</span>
        </p>
        <div class="class_tabs">
          <span
            v-for="(item, index) in gradeList"
            :key="item"
            @click="showTabs(index)"
            :class="[index==tabNum?'tabColor':'tabChange']"
          >
            <img
              src="../../assets/images/index/icon_king.png"
              alt=""
              v-show="index==tabNum"
            >
            {{item}}
          </span>
        </div>
        <!-- 小学 -->
        <div
          :class="[tabNum===0?'class_ani':'' ,'sub_style_primary','sub_show']"
          v-show="tabNum===0"
        >
          <ul>
            <li
              v-for="(item) in primaryList"
              :key="item.title"
            >
              <i>{{item.title}}</i>
              <i>
                <span
                  v-for="subItem in item.sub"
                  :key="subItem.kTitle"
                >
                  <a :href="subItem.href">{{subItem.kTitle}}</a>
                </span>
              </i>
            </li>
          </ul>
        </div>
        <!-- 初中 -->
        <div
          class="sub_style_junior sub_show"
          v-show="tabNum===1"
          
        >
          <ul>
            <li
              v-for="(item,index) in juniorList"
              :key="index"
            >
              <i>{{item.title}}</i>
              <i>
                <span
                  v-for="subItem in item.sub"
                  :key="subItem.kTitle"
                >
                  <a :href="subItem.href">{{subItem.kTitle}}</a>
                </span>
              </i>
            </li>
          </ul>
        </div>
        <!-- 高中 -->
        <div
          class="sub_style_high sub_show"
          v-show="tabNum===2"
        >
          <ul>
            <li
              v-for="item in highList"
              :key="item.title"
            >
              <i>{{item.title}}</i>
              <i>
                <span
                  v-for="subItem in item.sub"
                  :key="subItem.kTitle"
                >
                  <a :href="subItem.href">{{subItem.kTitle}}</a>
                </span>
              </i>
            </li>
          </ul>
        </div>
        <!-- 特色 -->
        <div
          class="sub_style_ts sub_show"
          v-show="tabNum===3"
        >
          <ul>
            <li
              v-for="item in tsList"
              :key="item.title"
            >
              <i>{{item.title}}</i>
              <i>
                <span
                  v-for="subItem in item.sub"
                  :key="subItem.kTitle"
                >
                  <a :href="subItem.href">{{subItem.kTitle}}</a>
                </span>
              </i>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 一线名师 -->
    <div class="top_teachers">
      <div :class="['top_main', teaMain?'top_main_show':'']">
        <p>
          <span class="cb_inset">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="title">金牌教师</span>
          <span class="title_tips">高品质课程有保障</span>
        </p>
        <div class="teacher">
          <div :class="['top_bg', teaBg?'top_bg_show':'']"></div>
          <div class="t_time">
            3000h+
            <span>授课时长达</span>
          </div>
          <div class="t_detail">
            <div
              v-for="item in tList"
              :key="item.name"
              class="tp ih-item square effect13 colored top_to_bottom"
            >
              <a href="javascript:void(0);">
                <div class="img">
                  <img
                    :src="item.src"
                    alt=""
                  >
                </div>
                <span>{{item.name}}</span>
              </a>
            </div>
            <div class="t_more">
              <div>
                <a href="http://www.hqy2001.com/teacher/index.shtml">
                  <span class="look_more">查看更多老师</span>
                  <span class="look_more">MORE</span>
                </a>
              </div>
            </div>
          </div>
          <div class="t_bottom">
            <span>严选教师，录用率10%</span>
            <span>沉淀20年教学教研经验</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 六大优势 -->
    <div class="six_advantage">
      <div :class="['six_title', sixTitle?'six_title_show':'']">
        <p>
          <span class="cb_inset">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="title">六大优势</span>
          <span class="title_tips">标准化教学有保障</span>
        </p>
      </div>
      <!-- <div :class="['advantage', sixTitle?'six_title_show':'']"> -->
      <div :class="['advantage', sixAdvantage?'six_advantage_show':'']">
        <div
          class="ad_detail ih-item square effect4"
          v-for="(item, index) in adList"
          :key="item.title"
          :class="[index%2==0?'six_bg_one':'six_bg_two']"
        >
          <a href="javascript:void(0);">
            <div class="img">
              <img
                :src="item.src"
                alt=""
              >
              <p>{{item.title}}</p>
            </div>
            <div class="mask1"></div>
            <div class="mask2"></div>
            <div class="info">
              <h3>{{item.title}}</h3>
              <p>{{item.tips}}</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 文章 -->
    <div class="article">
      <div :class="['article_banner', articleBg?'article_bg_show':'']">
        <img
          src="../../assets/images/index/News Center.png"
          alt=""
        >
        <div></div>
      </div>
      <div class="article_all">
        <div class="all">
          <div class="group">
            <div class="title">
              <span>集团新闻</span>
              <span @click="goList(0)">更多 ></span>
            </div>
            <div class="group_detail">
              <ul>
                <li
                  v-for="item in groupList"
                  :key="item.newId"
                >
                  <span></span>
                  <a
                    href="javascript:void(0);"
                    @click="goDetail(item)"
                  >{{item.title}}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="industry">
            <div class="title">
              <span>行业资讯</span>
              <span @click="goList(1)">更多 ></span>
            </div>
            <div class="industry_detail">
              <ul>
                <li
                  v-for="item in industryList"
                  :key="item.id"
                >
                  <span></span>
                  <a
                    href="javascript:void(0);"
                    @click="goDetail(item)"
                  >{{item.title}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学习中心地图 -->
    <div class="campus_map">
      <div :class="['campus_title', campusTitle?'campus_title_show':'']">
        <p>
          <span class="cb_inset">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="title">直营校区</span>
          <span class="title_tips">高效学习快乐提分</span>
        </p>
      </div>
      <div class="center_map">
        <!-- <div :class="['center_map', centerMap?'center_map_show':'']"> -->
          <div class="map_all">
            <div
              class="aicp1 school_tip"
              @mouseover="showSchool=0"
              @mouseout="showSchool=0"
            >
              <i class="area-box">
                <i class="dot"></i>
                <i class="pulse delay-01"></i>
                <i class="pulse delay-02"></i>
              </i>
              <span>东直门校区</span>
            </div>
            <div
              class="aicp2 school_tip"
              @mouseover="showSchool=1"
              @mouseout="showSchool=0"
            >
              <i class="area-box">
                <i class="dot"></i>
                <i class="pulse delay-01"></i>
                <i class="pulse delay-02"></i>
              </i>
              <span>黄庄校区</span>
            </div>
            <div
              class="aicp3 school_tip"
              @mouseover="showSchool=2"
              @mouseout="showSchool=0"
            >
              <i class="area-box">
                <i class="dot"></i>
                <i class="pulse delay-01"></i>
                <i class="pulse delay-02"></i>
              </i>
              <span>金源校区</span>
            </div>
            <div
              class="aicp4 school_tip"
              @mouseover="showSchool=3"
              @mouseout="showSchool=0"
            >
              <i class="area-box">
                <i class="dot"></i>
                <i class="pulse delay-01"></i>
                <i class="pulse delay-02"></i>
              </i>
              <span>公主坟校区</span>
            </div>
            <div
              class="aicp5 school_tip"
              @mouseover="showSchool=4"
              @mouseout="showSchool=0"
            >
              <i class="area-box">
                <i class="dot"></i>
                <i class="pulse delay-01"></i>
                <i class="pulse delay-02"></i>
              </i>
              <span>中关村校区</span>
            </div>
            <div
              class="aicp6 school_tip"
              @mouseover="showSchool=5"
              @mouseout="showSchool=0"
            >
              <i class="area-box">
                <i class="dot"></i>
                <i class="pulse delay-01"></i>
                <i class="pulse delay-02"></i>
              </i>
              <span>上地校区</span>
            </div>
            <img
              src="../../assets/images/index/surface.png"
              alt=""
              class="sur_one"
            >
            <div
              class="pin"
              v-show="centerMap"
            > </div>
            <div
              class="canter_pulse"
              v-show="centerMap"
            ></div>
            <div class="hqy_name">华清园教育</div>
            <img
              src="../../assets/images/index/surface.png"
              alt=""
              class="sur_three"
            >
            <img
              src="../../assets/images/index/surface.png"
              alt=""
              class="sur_four"
            >
            <img
              src="../../assets/images/index/surface.png"
              alt=""
              class="sur_five"
            >

            <!-- 校区详细介绍 -->
            <!-- 东直门 -->
            <div
              class="school_all_one school_all"
              v-show="showSchool===0"
            >
              <div class="school_img">
                <img
                  src="../../assets/images/index/xq.png"
                  alt=""
                >
              </div>
              <div class="school_text">
                <span>报名电话：</span>
                <span>010-5724 1971</span>
                <span>地址：北京市东直门东方银座C座7层</span>
              </div>
            </div>
            <!-- 黄庄 -->
            <div
              class="school_all_two school_all"
              v-show="showSchool===1"
            >
              <div class="school_img">
                <img
                  src="../../assets/images/index/xq.png"
                  alt=""
                >
              </div>
              <div class="school_text">
                <span>报名电话：</span>
                <span>010-5623 9682</span>
                <span>地址：北京市海淀区知春路118号知春大厦15层</span>
              </div>
            </div>
            <!-- 金源 -->
            <div
              class="school_all_three school_all"
              v-show="showSchool===2"
            >
              <div class="school_img">
                <img
                  src="../../assets/images/index/xq.png"
                  alt=""
                >
              </div>
              <div class="school_text">
                <span>报名电话：</span>
                <span>010-8886 5401</span>
                <span>地址：北京市海淀区蓝靛厂路25号汇博大厦A座二层</span>
              </div>
            </div>
            <!-- 公主坟 -->
            <div
              class="school_all_four school_all"
              v-show="showSchool===3"
            >
              <div class="school_img">
                <img
                  src="../../assets/images/index/xq.png"
                  alt=""
                >
              </div>
              <div class="school_text">
                <span>报名电话：</span>
                <span>010-5365 9689</span>
                <span>地址：北京市海淀区复兴路47号天行健大厦5层511室</span>
              </div>
            </div>
            <!-- 中关村 -->
            <div
              class="school_all_five school_all"
              v-show="showSchool===4"
            >
              <div class="school_img">
                <img
                  src="../../assets/images/index/xq.png"
                  alt=""
                >
              </div>
              <div class="school_text">
                <span>报名电话：</span>
                <span>010-5334 8242</span>
                <span>地址：北京市海淀区海淀南路34号艾瑟顿商业广场310</span>
              </div>
            </div>
            <!-- 上地 -->
            <div
              class="school_all_six school_all"
              v-show="showSchool===5"
            >
              <div class="school_img">
                <img
                  src="../../assets/images/index/xq.png"
                  alt=""
                >
              </div>
              <div class="school_text">
                <span>报名电话：</span>
                <span>010-6296 9885</span>
                <span>地址：北京市海淀区上地西路41号院宏达商务中心C座2层 C002</span>
              </div>
            </div>
          </div>
      </div>
    </div>
    <!-- 旗下品牌 -->
    <div class="hqy_brand">
      <div :class="['brand_title', brandTitle?'brand_title_show':'']">
        <p>
          <span class="cb_inset">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="title">旗下品牌</span>
          <span class="title_tips">多维度培训有保障</span>
        </p>
      </div>
      <div :class="['brand_all', brandAll?'brand_all_show':'']">
        <a
          :href='item.href'
          v-for="item in hqyBrand"
          :key="item.title"
        >
            <img
              :src="item.src"
              alt=""
              @click="goBrand(item.href)"
            >
        </a>
      </div>
    </div>
    <FooterNav />
    <!-- <Sidebar /> -->
  </div>
</template>

<script>
import HqyHeader from '../../components/header'
import Sidebar from '@/components/sidebar'
import FooterNav from "@/components/footernav";
import { getArticle } from '@/api/home.js'
// 老师图片
import cm from '../../assets/images/index/cm.png'
import jyt from '../../assets/images/index/jyt.jpg'
import xwy from '../../assets/images/index/xwy.png'
import wxt from '../../assets/images/index/wxt.png'
import xt from '../../assets/images/index/xt.png'
import zsy from '../../../public/images/index/zsy.jpg'
import yzx from '../../assets/images/index/yzx.png'
import yzh from '../../../public/images/index/yzh.jpg'
// 优势图标
import ad_one from '../../assets/images/index/ad_one.png'
import ad_two from '../../assets/images/index/ad_two.png'
import ad_three from '../../assets/images/index/ad_three.png'
import ad_four from '../../assets/images/index/ad_four.png'
import ad_five from '../../assets/images/index/ad_five.png'
import ad_six from '../../assets/images/index/ad_six.png'
import xq_one from '../../assets/images/index/xq.png'
// 引入数据
import hqyData from '../../../public/index.json'
import  BannerSwiper  from "./bannerSwiper";

export default {
  data () {
    return {
      bannerNum: 1,
      brandNum: 1,
      // 数字滚动
      hqyYear: 0,
      hqyBank: 0,
      hqyBankTwo: 10,
      hqyBankThree: 669,
      hqyStudentsOne: 0,
      hqyStudentsTwo: 10,
      hqyStudentsThree: 769,
      hqyParents: 65,
      parPoint: 0,
      numBank: '',
      numBankTwo: '',
      numBankThree: '',
      numYear: '',
      numStudents: '',
      numStudentsTwo: '',
      numStudentsThree: '',
      numParents: '',
      department:'9',
      gradeList: ['小学课程', '初中课程', '高中课程', '特色课程'],
      tabNum: 0,
      tList: [
        {
          src: cm,
          name: '陈娴老师'
        },
        {
          src: jyt,
          name: '彤彤老师'
        },
        {
          src: xwy,
          name: '文文老师'
        },
        {
          src: yzx,
          name: '轩轩老师'
        },
        {
          src: yzh,
          name: '智华老师'
        },
        {
          src: zsy,
          name: '松阳老师'
        },
        {
          src: wxt,
          name: '王贤婷老师'
        },
        {
          src: xt,
          name: '夏婷老师'
        },
      ],
      adList: [
        {
          src: ad_one,
          title: '多维度综合测评',
          tips: '学前课后综合测评，保证学生了解每阶段学习情况，同时为学生智能规划最优学习路径，全程可视化。'
        },
        {
          src: ad_two,
          title: 'AI系统全线辅助教学',
          tips: '为学生打造全方位的学习场景，可视化的学习路径。海量题库支持+多维度学情分析，错题归纳+智能推题，个性化学习方案让学生轻松提分.'
        },
        {
          src: ad_three,
          title: '学习效果可跟踪',
          tips: '完整记录学生学习数据，家长端可实时查看学生学习进度及学习情况，随时掌握学生学习效果.'
        },
        {
          src: ad_four,
          title: '精选优质一线老师',
          tips: '汇聚名校名师之力，二十年储备骨干教师资源近3000+，平均教龄20年以上，累计服务学员超千万。'
        },
        {
          src: ad_five,
          title: '全龄段生涯学习规划',
          tips: '覆盖全龄段学生关键升学点，为学生提供一站式的教学服务。从学科辅导到学生生涯路径规划，完整帮助学生匹配不同时期产品。'
        },
        {
          src: ad_six,
          title: '专属学习答题群',
          tips: '校区专属学习群，定期更新课程学习资料，随时在线答疑，反馈课堂学习情况。'
        },
      ],
      hqyBrand: [
        {
          title: "华清园在线 →",
          href: "http://www.hqy2001.com/",
          src: require('../../assets/images/index/hqyzx.png')
        },
        {
          title: "山姆大叔教育集团  →",
          href: "http://www.unclesam-edu.com/",
          src: require('../../assets/images/index/smjyjt.png')
        },
        {
          title: "志愿无忧",
          href: "http://www.51bzy.com/zywy/",
          src: require('../../assets/images/index/zywy.png')
        },
        {
          title: "K13课外辅导",
          href: "http://www.usk13.com/",
          src: require('../../assets/images/index/k13.png')
        },
        {
          title: "山姆大叔在线",
          href: "http://www.unclesamonline.com/",
          src: require('../../assets/images/index/smzx.jpg')
        },
        {
          title: "逻辑制造",
          href: "http://www.hi-logic.cn/",
          src: require('../../assets/images/index/ljzz.png')
        },
        {
          title: "山姆大叔科技联盟",
          href: "http://www.unclesamrobot.com/index.html",
          src: require('../../assets/images/index/smkjzz.png')
        },
        {
          title: "节奏嘟嘟",
          href: "http://www.dudumusic.cn/",
          src: require('../../assets/images/index/jzdd.png')
        },
        {
          title: "山姆大叔少儿英语",
          href: "http://www.unclesamedu.com/",
          src: require('../../assets/images/index/smsr.png')
        },
        {
          title: "山姆大叔国际儿童成长中心",
          href: "http://www.unclesamchild.com/",
          src: require('../../assets/images/index/smczzx.png')
        },
        {
          title: "幼升小",
          href: "http://www.ysxiao.cn/",
          src: require('../../assets/images/index/ysx.png')
        },
        {
          title: "小升初网",
          href: "http://www.xschu.com/",
          src: require('../../assets/images/index/xsc.png')
        },
        {
          title: "中考在线",
          href: "http://www.zgkao.com/",
          src: require('../../assets/images/index/zkzx.png')
        },
        {
          title: "高考在线",
          href: "http://www.gaokzx.com/",
          src: require('../../assets/images/index/gkzx.png')
        },
        {
          title: "自主招生在线",
          href: "http://www.zizzs.com/",
          src: require('../../assets/images/index/zz.png')
        }
      ],
      showSchool: 0,
      scroolHigh: '',// 滚动高度
      scroolEye: '',// 滚动视度
      scroll: '',
      clientHeight: '',
      offsetTop: '',
      groupList: [],// 集团新闻
      industryList: [],// 行业资讯
      courseOne: false,
      courseFour: false,
      courseTips: false,
      tabShow: false,
      teaBg: false,
      teaMain: false,
      sixTitle: false,
      sixAdvantage: false,
      articleBg: false,
      campusTitle: false,
      centerMap: false,
      brandTitle: false,
      brandAll: false,
    }
  },
  components: {
    'hqy-header': HqyHeader,
    FooterNav,
    Sidebar,
    BannerSwiper
  },
  created () {
    this.groupList = []
    this.industryList = []
    this.numMove()
    this.showArticle()
    this.getLy()
    this.primaryList = hqyData.primaryList
    this.juniorList = hqyData.juniorList
    this.highList = hqyData.highList
    this.tsList = hqyData.tsList
    // 监控页面滚动高度
    window.onscroll = () => {
      //为了保证兼容性，这里取两个值，哪个有值取哪一个
      //scrollTop就是触发滚轮事件时滚轮的高度
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // console.log("滚动距离" + scrollTop)
      if (scrollTop > 200) {
        this.courseOne = true
      }
      if (scrollTop > 250) {
        this.courseFour = true
      }
      if (scrollTop > 300) {
        this.courseTips = true
      }
      if (scrollTop > 780) {
        this.tabShow = true
      }
      if (scrollTop > 1280) {
        this.teaBg = true
        this.teaMain = true
      }
      if (scrollTop > 1980) {
        this.sixTitle = true
        this.sixAdvantage = true
      }
      if (scrollTop > 2580) {
        this.articleBg = true
      }
      if (scrollTop > 3180) {
        this.campusTitle = true
      }
      if (scrollTop > 3180) {
        this.centerMap = true
        this.brandTitle = true
        this.brandAll = true
      }
    }
  },
  mounted () {
  },
  methods: {
    getLy() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://op.jiain.net/20004559/10115955.js'
      document.head.appendChild(script)
    },
    numMove () {
      this.numBank = setInterval(() => {
        this.hqyBank++
        if (this.hqyBank === 96) {
          clearInterval(this.numBank)
        }
      }, 20)
      this.numBankTwo = setInterval(() => {
        this.hqyBankTwo++
        if (this.hqyBankTwo === 99) {
          this.hqyBankTwo = '00'
          clearInterval(this.numBankTwo)
        }
      }, 18)
      this.numBankThree = setInterval(() => {
        this.hqyBankThree++
        if (this.hqyBankThree === 999) {
          this.hqyBankThree = '000'
          clearInterval(this.numBankThree)
        }
      }, 1)
      this.numYear = setInterval(() => {
        this.hqyYear++
        if (this.hqyYear === 20) {
          clearInterval(this.numYear)
        }
      }, 80)
      this.numStudents = setInterval(() => {
        this.hqyStudentsOne++
        if (this.hqyStudentsOne === 28) {
          clearInterval(this.numStudents)
          this.hqyStudentsOne = '28'
        }
      }, 46)
      this.numStudentsTwo = setInterval(() => {
        this.hqyStudentsTwo++
        if (this.hqyStudentsTwo === 99) {
          this.hqyStudentsTwo = '00'
          clearInterval(this.numStudentsTwo)
        }
      }, 18)
      this.numStudentsThree = setInterval(() => {
        this.hqyStudentsThree++
        if (this.hqyStudentsThree === 999) {
          this.hqyStudentsThree = '000'
          clearInterval(this.numStudentsThree)
        }
      }, 1)
      this.numParents = setInterval(() => {
        this.hqyParents++
        this.parPoint++
        if (this.parPoint === 10) {
          this.parPoint = 0
        }
        if (this.hqyParents === 98) {
          this.parPoint = 58
          clearInterval(this.numParents)
        }
      }, 60)
    },
    showTabs (index) {
      this.tabNum = index
    },
    // 获取文章
    showArticle () {
      getArticle().then(res => {
        if (this.groupList.length < 3) {
          res.data.list.forEach(item => {
            if (item.objectLocation === "4") {
              this.groupList.push(item)
            }
          })
        }
        if (this.industryList.length < 3) {
          res.data.list.forEach(item => {
            if (item.objectLocation === "1") {
              this.industryList.push(item)
            }
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    goDetail(item) {
      let articleId = JSON.stringify(item)
      sessionStorage.setItem("articleId", articleId)
      this.$router.push({
        name: 'articleDetails',
        params: {
          id:item.newId,
          department: "9"
        }
      })
    },
    goList(num) {
      let tabNum = {}
      tabNum.num = num
      this.$router.push({
        name: 'articleList',
        params: tabNum
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "./index.scss";

</style>